<template>
  <div class="create-page">
    <div class="left-slide">
      <StructureList @nodeClick="handleNodeClick" ref="structureListRef"/>
    </div>
    <div class="right-form-container">
      <div class="header-box">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
          <el-form-item label="部门名称" prop="keyword">
            <el-input v-model="searchForm.keyword" placeholder="请输入部门名称" />
          </el-form-item>
          <el-form-item>
            <el-button v-permission="'department:search'" type="primary" @click="submitForm">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="formCancel">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button v-permission="'department:new'" type="primary" @click="addOrg"><i class="el-icon-plus" />新增部门</el-button>
      </div>
      <div class="table-container">
        <div class="table-box">
          <el-table
            :data="contentData"
            :height="'100%'"
            border
            :header-cell-style="{textAlign:'center'}"
            :cell-style="{textAlign:'center'}"
          >
<!--            <el-table-column type="selection" />-->
            <el-table-column prop="name" label="部门名称" />
            <el-table-column prop="code" label="唯一编码" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" width="240">
              <template slot-scope="scope">
                <el-button v-permission="'department:edit'" type="warning" size="mini" @click="check(scope.row)">编辑</el-button>
                <el-button v-permission="'department:delete'" type="danger" size="mini" @click="dele(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="table-pagination">
          <!-- 分页 -->
          <el-pagination
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            :current-page="pagination.current"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <EditDepartment ref="editDepartmentRef" :form-data="currentRow" @callback="handleEditorCallBack"/>
  </div>
</template>
<script>
import StructureList from '@/components/common/StructureList.vue';
import EditDepartment from '@/components/system/editDepartment';
import { delOrg, GetDepList } from '@/api/system';
// import { hasPermission } from '@/utils/getPermisssion';
export default {
  name: 'Department',
  components: {
    StructureList,
    EditDepartment
  },
  props: {},
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      searchForm: {},
      contentData: [],
      pageSize: 10,
      currentRow: null,
      pid: ''
    }
  },
  created() {},
  mounted() {
    this.getTableData();
  },
  methods: {
    handleEditorCallBack() {
      this.currentRow = null;
      this.getTableData();
      this.$refs['structureListRef'].getTreeData();
    },
    addOrg() {
      this.currentRow = null;
      this.$refs['editDepartmentRef'].show();
    },
    handleNodeClick(val) {
      this.pid = val.id;
      this.getTableData();
    },
    submitForm() {
      this.getTableData();
    },
    formCancel() {
      this.searchForm = {};
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pagination.current = val;
      this.getTableData();
    },
    check(row) {
      this.currentRow = row;
      this.$refs['editDepartmentRef'].show();
    },
    dele(row) {
      this.$confirm('确定删除当前机构?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOrg({ ids: row.id }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.handleEditorCallBack();
          }
        })
      })
    },
    getTableData() {
      const requestBody = {
        current: this.pagination.current,
        size: this.pagination.pageSize
      }
      if (this.searchForm.keyword && this.searchForm.keyword !== '') {
        requestBody.keyword = this.searchForm.keyword;
      }
      if (this.pid && this.pid !== '') {
        requestBody.pid = this.pid;
      }
      GetDepList(requestBody).then(res => {
        if (res.code === 200) {
          this.contentData = res.data.records;
          this.pagination.total = res.data.total;
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.create-page {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  .left-slide {
    width: 20%;
    height: 100%;
    border-right: 10px #f0f0f0 solid;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
  }
  .right-form-container {
    width: 80%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .header-box{
      width: 100%;
      background-color: #fff;
      padding: 10px 15px;
      ::v-deep .el-form-item{
        margin-right: 30px;
        .el-form-item__label{
          font-family: "Microsoft YaHei";
          color: #333
        }
      }
    }
    .table-container{
      width: 100%;
      border-top: 10px #f0f0f0 solid;
      flex: 1;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      .table-box {
        width: 100%;
        flex-grow: 1;
        overflow: hidden;
        overflow-y: auto;
        a{
          color: #409EFF;
        }
      }
      .table-pagination{
        height: 60px;
        width: 100%;
        text-align: right;
        background-color: #fff;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        ::v-deep .el-pagination{
          span, button, ul>li{
            height: 50px;
            line-height: 50px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
